<template>
  <view class="container">
    <form @submit="onSubmit">
      <label for="height">身高（厘米）：</label>
      <input type="number" id="height" name="height" required></input>
      <label for="weight">体重（公斤）：</label>
      <input type="number" id="weight" name="weight" required></input>
      <button formType="submit" class="calc-btn" bindtap="showView">计算</button>
    </form>
    <view class="tips" v-if="tips">{{ empty === 1 ? '请输入身高' : empty === 2 ? '请输入体重' : '请输入身高体重'}}
    </view>
    <view class="result" v-if="isShow">
      BMI指数：{{bmi}}
    </view>
    <view class="advice" v-if="isShow">
      建议：{{advice}}
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        bmi: '', // BMI指数
        advice: '', // 建议
        height: '',
        weight: '',
        empty: 0,
        result: '',
        isShow: false,
        tips: false
      };
    },
    methods: {
      // 表单提交事件处理函数
      onSubmit: function(event) {
        const formData = event.detail.value; // 获取表单数据
        const height = parseInt(formData.height); // 身高
        const weight = parseInt(formData.weight); // 体重
        // 调用计算函数计算BMI指数
        var result = this.calculateBMI(height, weight);
        // console.log(typeof result)
        if (result === Infinity) {
          result = 0
        }
        this.result = result
        this.height = height
        this.weight = weight

        // 根据BMI指数返回不同的建议
        let advice = '';
        if (result < 18.5) {
          advice = '过轻';
        } else if (result < 24) {
          advice = '正常范围';
        } else if (result < 28) {
          advice = '过重';
        } else if (result < 32) {
          advice = '肥胖';
        } else if (result > 32) {
          advice = '非常肥胖';
        }

        this.bmi = result.toFixed(1) // 保留一位小数
        this.advice = advice

        if (isNaN(this.weight) && isNaN(this.height)) {
          this.empty = 0
        }
        if (isNaN(this.result) || isNaN(this.weight) || isNaN(this.height)) {
          if (isNaN(this.weight) && !(isNaN(this.height))) {
            this.empty = 2
          } else if (isNaN(this.height) && !(isNaN(this.weight))) {
            this.empty = 1
          }
          this.tips = true
          this.isShow = false
        } else {
          this.tips = false
          this.isShow = true
        }
      },
      // 计算BMI指数
      calculateBMI(height, weight) {
        const heightM = height / 100; // 将身高转换为米
        const bmi = weight / (heightM * heightM);
        return bmi;
      },
    }
  }
</script>

<style lang="scss">
  page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0 auto;
    // margin-top: 150rpx;
    height: 675rpx;
    width: 675rpx;
    font-size: 30rpx;
    font-weight: bold;
    background-color: white;
    border-radius: 15rpx;
    box-shadow: 0px 1px 2px 0.1px #ddd;

    form {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      label {
        font-size: 30rpx;
        margin-top: 20rpx;
      }

      input {
        width: 400rpx;
        height: 60rpx;
        font-size: 28rpx;
        border: 1rpx solid #ddd;
        border-radius: 10rpx;
        margin-top: 20rpx;
        margin-bottom: 30rpx;
        text-align: center;
      }

      .calc-btn {
        width: 200rpx;
        height: 80rpx;
        font-size: 32rpx;
        color: #fff;
        background-color: #fba007;
        box-shadow: 0px 1px 2px 0.1px #ddd;
        border-radius: 10rpx;
        margin-top: 50rpx;
      }
    }
  }

  .tips {
    color: #f00;
    font-size: 36rpx;
    margin-top: 50rpx;
  }

  .result {
    font-size: 36rpx;
    margin-top: 50rpx;
  }

  .advice {
    font-size: 32rpx;
    color: #f00;
    margin-top: 20rpx;
  }
</style>